<template>
  <div class="pop-ceil">
    <div class="pop-box">
      <header>
        <span @click="close" class="close-btn"> X</span>
      </header>
      <div class="pop-content">
        <p><span></span> 确定要删除此商品吗?</p>
        <p>删除后购物车将不存在该商品，确定要删除吗？</p>
      </div>
      <div class="pop-btns">
        <p @click="confirm">确定</p>
        <p @click="close">取消</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineComponent, onBeforeMount, onUnmounted, toRefs } from 'vue';

defineComponent({
  name: 'ShoppingCartDeleteItems'
})
const props = defineProps({
  deleteOpt: {
    type: Object,
    default: () => {}
  }
})
let { deleteOpt } = toRefs(props)

const emit = defineEmits(['close', 'confirm'])

function forbidScroll () {
  const body = document.querySelector('body')
  body.style.overflow = 'hidden'
}
function close () {
  emit('close')
}
function confirm () {
  emit('confirm', deleteOpt.value)
}
function scrollBar () {
  const body = document.querySelector('body')
  body.style.overflow = 'auto'
}

onBeforeMount(() => {
  forbidScroll()
})
onUnmounted(() => {
  scrollBar()
})
</script>

<style lang='scss' scoped>
.pop-ceil {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,.5);
  z-index: 9999;
  .pop-box {
    width: 600px;
    height: 300px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -300px;
    margin-top: -150px;
    background: #fff;
    border-radius: 2px;
    color: #333;
    .close-btn {
      position: absolute;
      display: inline-block;
      right: 10px;
      top:10px;
      &:hover {
        cursor: pointer;
      }
    }
    .pop-content {
      p {
        text-align: center;
        &:nth-child(1) {
          font-size: 22px;
          line-height: 30px;
          margin-top: 20px;
        }
        &:nth-child(1) {
          font-size: 18px;
          line-height: 100px;
        }
      }

    }
    .pop-btns {
      overflow: hidden;
      width: 360px;
      margin: 40px auto 0;
      p {
        width: 160px;
        text-align: center;
        height: 48px;
        line-height: 48px;
        border-radius: 2px;
        box-sizing: border-box;
        float: left;
        &:nth-child(1) {
          background: #C83732;
          margin-right: 20px;
          color: #fff;
        }
        &:nth-child(2) {
          border: 1px solid #C83732;
          color: #C83732;
        }
        &:hover {
          cursor: pointer;
        }
      }
    }
  }
}
</style>
